<template>
  <div id="details">
    <img src="../assets/img/故宫.png" alt />
    <van-icon name="arrow-left" size="30px" style="position: absolute;left:5px;top:3px" @click="$router.back(-1)"/>
    <div class="title">
      <van-row type="flex" justify="space-between" class="Details">
        <van-col span="12">
          <p style="font-size: 26px;margin:10px">北京三日游</p>
          <p style="font-size: 14px;color: #b3b3b3;margin:10px">天安门/故宫/长城</p>
        </van-col>
        <van-col span="6" style="margin-top: 5%;color: red;">{{gIntroduce[0].money}}</van-col>
      </van-row>
      <div >
        <van-cell is-link title="14520人已去过， 五星好评" @click="show = true" />
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
      </div>
    </div>
    <div style="">
      <h2 style="margin:10px">具体介绍</h2>
      <p style="color:gray;margin:10px">{{gIntroduce[0].init}}</p>
    </div>
    <div style="position: absolute;top: 65%;width:95%;margin:10px">
      <h2>游玩指南</h2>
      <van-swipe :loop="false" :width="190" style="margin: 0 10px;">
        <van-swipe-item class="lun">
          <img src="../assets/img/1.jpg" alt />
        </van-swipe-item>
        <van-swipe-item class="lun">
          <img src="../assets/img/1.jpg" alt />
        </van-swipe-item>
        <van-swipe-item class="lun">
          <img src="../assets/img/1.jpg" alt />
        </van-swipe-item>
        <van-swipe-item class="lun">
          <img src="../assets/img/1.jpg" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="width:100%">
      <van-submit-bar :price="99900" button-text="买了" @submit="onSubmit">
        <van-checkbox v-model="checked">想去</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { getIntroduce } from "@/api";
import Vue from "vue";
import { Col, Row } from "vant";
import { ActionSheet } from "vant";
import { Toast } from "vant";
import { Cell } from "vant";
import { Swipe, SwipeItem } from "vant";
import { SubmitBar } from "vant";
import {Checkbox} from "vant"
import { Icon } from 'vant';

Vue.use(Icon);
Vue.use(Checkbox)
Vue.use(SubmitBar);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Cell);
Vue.use(ActionSheet);
Vue.use(Col);
Vue.use(Row);

export default {
  data() {
    return {
      gIntroduce: ['',''],
      show: false,
      onSubmit:0,
      checked:0,
      actions: [{ name: "查看" }, { name: "购买" }, { name: "取消" }],
      // money:''
    };
  },
  
  methods: {
    onSelect(item) {
      this.show = false;
      Toast(item.name);
    },
  },
  
};
</script>

<style scoped>
.lun {
  /* margin-right: 10px; */
}
.lun img{
  width: 90%;
}
.Details {
  height: 82px;
}
.content {
  padding: 16px 16px 160px;
}
img {
  width: 100%;
}
</style>